<template>
  <div class="partOne">
    <div class="picScroll">
      <div class="newsTip">
        <img src="@/imgs/news.png" alt="" />
      </div>
      <!-- 轮播图内容 -->
      <div class="scrollCnt">
        <a-carousel autoplay="true">
          <div
            v-for="(value, index) in adoptingCat"
            :key="index"
            @click="() => handleDetails(value.animalNumbers)"
          >
            <img
              :src="`http://i79768a535.zicp.fun:23570/common/download?name=${value.animalImage}`"
              alt=""
              style="width: 425px; height: 300px"
            />
            <div class="msg">
              <span>222</span>
              <span>222</span>
              <span>222</span>
            </div>
          </div>
        </a-carousel>
      </div>
    </div>
    <div class="partOne-right">
      <div class="latestNwes">
        <div class="title">
          <span class="tit">最新消息</span>
          <div class="box">
            <div class="cnt">
              领养之家是一个纯属个人组织，能力有限，不以盈利为目的，只对从领养之家领养的猫、狗提供服务，不对外营业。因场地有限等因素的影响，我们仍暂缓提供寄养服务，感谢理解！…
              <span @click="toLatestNews" class="more">更多</span>
            </div>
          </div>
        </div>
      </div>
      <div class="adoptionNotice">
        <div class="latestNwes">
          <div class="title">
            <span class="tit">领养须知</span>
            <div class="box">
              <div class="cnt-bottom">
                领养之家是一个纯属个人组织，能力有限，不以盈利为目的，只对从领养之家领养的猫、狗提供服务，不对外营业。因场地有限等因素的影响，我们仍暂缓提供寄养服务，感谢理解！…
                <span @click="tolAdoptMsg" class="more">更多</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="partTwo">
    <div class="container-pTwo">
      <div class="title-pTwo clr">
        <div class="fl">
          <img src="@/imgs/cat.png" alt="" class="cat" />
          待领养的猫猫
        </div>
        <span class="more-black" @click="handleMore_1"> 更多></span>
      </div>
      <!-- 待领养的猫猫列表 -->
      <div class="clr">
        <ul>
          <!-- 列表元素 -->
          <li class="first" v-for="(value, index) in adoptingCat" :key="index">
            <img
              :src="`http://i79768a535.zicp.fun:23570/common/download?name=${value.animalImage}`"
              alt=""
              style="
                float: left;
                margin-left: 6px;
                width: 185px;
                padding: 5px;
                height: 116px;
              "
              @click="() => handleDetails(value.animalNumbers)"
            />
            <div class="txt">
              <div class="details">
                <span>昵称:&nbsp;&nbsp;{{ value.animalName }}</span>
                <span>品种:&nbsp;&nbsp;{{ value.breed }}</span>
                <span style="font-size: 14px"
                  >年龄:&nbsp;&nbsp;{{ value.animalAge }} 年</span
                >
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="container-pTwo">
      <div class="title-pTwo clr">
        <div class="fl">
          <img src="@/imgs/cat.png" alt="" class="cat" />
          已领养的猫猫
        </div>
        <span class="more-black" @click="handleMore_2"> 更多></span>
      </div>
      <!-- 已领养的猫猫列表 -->
      <div class="clr">
        <ul>
          <!-- 列表元素 -->
          <li class="first" v-for="(value, index) in adoptedCat" :key="index">
            <img
              :src="`http://i79768a535.zicp.fun:23570/common/download?name=${value.animalImage}`"
              alt=""
              style="
                float: left;
                margin-left: 6px;
                width: 185px;
                padding: 5px;
                height: 116px;
              "
              @click="() => handleDetails(value.animalNumbers)"
            />
            <div class="txt">
              <div class="details">
                <span>昵称:&nbsp;{{ value.animalName }}</span>
                <span>品种:&nbsp;&nbsp;&nbsp;&nbsp;{{ value.breed }}</span>
                <span>年龄:&nbsp;{{ value.animalAge }} 年</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 小卡片 -->
  <div class="partThree">
    <div class="container-three">
      <div class="tips">
        <div class="title-three">
          <span>小常识</span>
        </div>
        <div class="box-three">
          <div class="cnt-three">
            搬家对于任何人来说，都是十分忙碌而且压力山大的。从一个熟悉的环境搬到另外一个陌生的环境
            ，任何生物都需要时间来适应和调整。尤其对于猫咪来说，陌生的环境会让猫咪十分害怕，甚至出现严重的应激反应，例如不吃不喝或是突然出现攻击性。如果你最近正好要搬家，
            为了家里毛孩子的健康，请做好以下几点：搬家前的准备搬家前…
            <span
              @click="tolCommonSense"
              style="color: #c57b5d; font-size: 13px"
              >更多&gt;</span
            >
          </div>
        </div>
      </div>
      <div class="aboutUs">
        <div class="title-three">
          <span>关于我们</span>
        </div>
        <div class="box-three">
          <div class="cnt-three">
            搬家对于任何人来说，都是十分忙碌而且压力山大的。从一个熟悉的环境搬到另外一个陌生的环境
            ，任何生物都需要时间来适应和调整。尤其对于猫咪来说，陌生的环境会让猫咪十分害怕，甚至出现严重的应激反应，例如不吃不喝或是突然出现攻击性。如果你最近正好要搬家，
            为了家里毛孩子的健康，请做好以下几点：搬家前的准备搬家前…
            <span
              style="color: #c57b5d; font-size: 13px; cursor: default"
              @click="handleAbout"
              >更多&gt;</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Login from "@/components/modal/loginModal.vue";
import { useRouter } from "vue-router";
import LocalCatch from "@/utils/token";
import Loaded from "../default/default.vue";
import useLogin from "@/utils/statusManage.js";
import {
  getAllAnimals,
  download,
  getAdopted,
  getAdopting,
} from "@/service/api.js";
const router = useRouter();
// myDetails Dom
const myDetails = ref();
// isLoading
const isLoading = ref();
// 待领养的猫
const adoptingCat = ref([]);
// 已经领养的猫
const adoptedCat = ref([]);

// 获取可用的url
const load = async (name) => {
  if (name) {
    const res = await download({ name });
  }
};
const handleDetails = (Num) => {
  router.push({ name: "animalDetails", query: { animalNumbers: Num } });
};
//点击更多
const handleMore_1 = () => {
  router.push({ name: "moreAnimals_2" });
};
const handleMore_2 = () => {
  router.push({ name: "moreAnimals" });
};
// 查询已领养动物
const getAnimals = async () => {
  const adopted = await getAdopted({
    pageNumber: 1,
    pageSize: 5,
  });

  console.log(adopted);
  //已领养
  if (adopted.code === 1) {
    const brr = [];

    if (adopted.data.records.length > 5 || adopted.data.records.length === 5) {
      for (let k = 0; k < 5; k++) {
        brr.push(adopted.data.records[k]);
      }
      console.log(brr);
      adoptedCat.value = brr;

      for (let o = 0; o < adoptedCat.value.length; o++) {
        load(adoptedCat.value.animalImage);
      }
    } else {
      const brr = [];

      for (let k = 0; k < adopted.data.records.length; k++) {
        brr.push(adopted.data.records[k]);
      }
      console.log(brr);
      adoptedCat.value = brr;

      for (let o = 0; o < adoptedCat.value.length; o++) {
        load(adoptedCat.value.animalImage);
      }
    }
  }
};
// 待领养
const getAdoptingAnimals = async () => {
  const res = await getAdopting({
    pageNumber: 1,
    pageSize: 5,
  });
  console.log(res);
  const arr = [];
  if (res.code === 1) {
    if (res.data.records.length < 5 || res.data.records.length === 5) {
      for (let j = 0; j < res.data.records.length; j++) {
        arr.push(res.data.records[j]);
      }
      console.log(arr);
      adoptingCat.value = arr;

      for (let i = 0; i < adoptingCat.value.length; i++) {
        load(adoptingCat.value.animalImage);
      }
    }
  } else {
    for (let j = 0; j < 5; j++) {
      arr.push(res.data.records[j]);
    }
    console.log(arr);
    adoptingCat.value = arr;

    for (let i = 0; i < adoptingCat.value.length; i++) {
      load(adoptingCat.value.animalImage);
    }
    console.log(22222);
  }
};

getAnimals();
getAdoptingAnimals();
// 关于我们
const handleAbout = () => {
  router.push({ name: "about" });
};
//跳转到NavDetails
const toNavDetails = () => {
  router.push({ path: "/navDetails" });
};
//跳转到latestNews
const toLatestNews = () => {
  router.push({ path: "/navDetails/latestNews" });
};
// 领养须知
const tolAdoptMsg = () => {
  router.push({ path: "/navDetails/adoptMsg" });
};
//小常识
const tolCommonSense = () => {
  router.push({ path: "/navDetails/lcommonSense" });
};
</script>
<style>
.partOne,
.container-pTwo {
  display: flex;
  flex-flow: row wrap;

  width: 1000px;
}
.partOne .adoptionNotice {
  position: relative;
  top: -24px;
}
.partOne .adoptionNotice .cnt-bottom {
  height: 135px;
  overflow: hidden;
  background: #e0dbd6;
  padding: 10px 18px;
  font-size: 13px;
  color: #423834;
  line-height: 24px;
}
.partOne .partOne-right {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  overflow: hidden;
  padding-left: 30px;
  height: 400px;
  width: 523px;
}
.partOne .partOne-right .latestNwes .title {
  font-size: 18px;
  color: #423834;
  border-bottom: 1px solid #d4d0cd;
  line-height: 30px;
}
.partOne .partOne-right .latestNwes .box {
  padding-top: 10px;
  border-top: 1px solid #fbf6f1;
}
.partOne .partOne-right .latestNwes .box .cnt {
  height: 144px;
  overflow: hidden;
  background: #e0dbd6;
  padding: 10px 18px;
  font-size: 13px;
  color: #423834;
  line-height: 24px;
}
.latestNwes .title .tit {
  border-bottom: 3px solid #665843;
  position: relative;
  bottom: 1px;
  padding-bottom: 3px;
}
.cnt .more,
.cnt-bottom .more {
  color: #c57b5d;
  font-size: 13px;
  cursor: default;
}
.more-black {
  font-size: 14px;
  color: #423834;
  float: right;
  position: relative;
  bottom: -18px;
  cursor: pointer;
}
.partOne .picScroll {
  position: relative;
  float: left;
  width: 477px;
  height: 375px;
  background: url("@/imgs/picBg.jpg") no-repeat;
}
.partTwo {
  padding-top: 25px;
}
.partTwo .container-pTwo .title-pTwo {
  border-bottom: 1px solid #d4d0cd;
  width: 1000px;
  height: 45px;
}
.partTwo .title-pTwo .fl {
  font-size: 18px;
  color: #423834;
  float: left;
}
.partTwo .title-pTwo .fl img {
  width: 37px;
  height: 44.4px;
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle;
  border-bottom: 3px solid #665843;
  padding-bottom: 5px;
  position: relative;
  bottom: -2px;
}

.partTwo .container-pTwo ul .first {
  display: flex;
  flex-flow: column nowrap;
  float: left;
  margin-left: 6px;
  width: 185px;
  padding: 5px;
}
.partTwo .container-pTwo ul .first .txt {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  margin-top: 5px;
  width: 182px;
  padding: 5px;
  font-size: 14px;
}
.partTwo .container-pTwo ul .first .txt .details {
  display: flex;
  flex-flow: row wrap;
  width: 182px;
  padding-left: 2px;
}
.partTwo .container-pTwo ul .first .txt .details span {
  width: 85px;
}
.partOne .picScroll .newsTip {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.clr {
  zoom: 1;
}
.partOne .picScroll .scrollCnt {
  margin: 23px 27px 0 27px;
  width: 425px;
  height: 352px;
  overflow: hidden;
  position: relative;
}
.partOne .picScroll .scrollCnt .msg {
  position: relative;
  z-index: 9;
}
.partThree {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  padding-top: 25px;
}
.partThree .container-three {
  width: 1000px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.partThree .container-three .tips,
.aboutUs {
  width: 478px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
}
.partThree .container-tree .title-three {
  font-size: 18px;
  color: #423834;
  border-bottom: 1px solid #d4d0cd;
  line-height: 30px;
}
.partThree .container-three .title-three span {
  border-bottom: 3px solid #665843;
  position: relative;
  bottom: 1px;
  padding-bottom: 3px;
}
.partThree .container-three .box-three {
  padding-top: 10px;
  border-top: 1px solid #fbf6f1;
}
.partThree .container-three .cnt-three {
  overflow: hidden;
  background: #e0dbd6;
  padding: 10px 18px;
  font-size: 13px;
  color: #423834;
  line-height: 24px;
}
</style>
